<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />

        <div class="flex flex-row">
            <div class="color-main">1111</div>
            <div class="color ml-2">1111</div>
            <div class="ml-2">1111</div>
            <div class="ml-2">1111</div>
            <div class="ml-2">1111</div>
            <div class="ml-2">1111</div>
            <div class="ml-2 a">1111</div>
        </div>
        <el-button @click="change"> 修改</el-button>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
    name: "HomeView",
    components: {
        HelloWorld
    },
    methods: {
        change() {
            const root = document.querySelector(":root");
            // 设置 CSS 变量
            root.style.setProperty("--color-main", "red");
        }
    }
};
</script>
<style lang="scss" scoped>
.color {
    color: $color-main;
}
</style>
